<template>
  <section class="pb-90" id='features'>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-12 col-lg-8">
          <!-- section title -->
          <div class="section-title text-center">
            <h2>发展方向</h2>
            <p>我们是一群热爱技术，并积极寻求自我突破的开发者！</p>
          </div>
          <!-- End of section title -->
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <!-- nav tab content -->
          <div class="tab-content price-content">
            <div :class="`tab-pane fade active show`" role="tabpanel">
              <div class="row">
                <div class="col-md-6 col-lg-4"
                     v-for="item in studentList"
                     :key="item.id">
                  <!--Single price plan -->
                  <div class="single-price-plan text-center">
                    <div class="single-price-top">
                      <img :src="item.iconPath"/>
                      <h4>{{ item.name }}</h4>

                    </div>
                    <div class="single-price-body">
                      <div class="price-list">
                        <ul>
                          <li>
                            {{ item.content }}
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "Pricing",
  data() {
    return {
      month: true,
      year: false,
      studentList: [
        {
          id: 0,
          name: "算法/数据结构",
          iconPath: '/assets/img/feature/算法.png',
          content: "C/C++/Java/Python"
        }, {
          id: 1,
          name: "前端开发",
          iconPath: '/assets/img/feature/前端开发.png',
          content: "HTML/css/JS/TS/Vue/React/uni-app"
        }, {
          id: 2,
          name: "后端开发",
          iconPath: '/assets/img/feature/后端开发.png',
          content: "Java/C#/PHP/RUST/Go"
        }, {
          id: 3,
          name: "UI设计",
          iconPath: '/assets/img/feature/艺术家.png',
          content: "图标设计/视觉设计/界面设计/网页设计/交互设计/动效设计/原型图设计"
        }, {
          id: 4,
          name: "服务器运维",
          iconPath: '/assets/img/feature/响应式.png',
          content: "Ganglia/Nagios/Shell脚本/Awk/Sed/Hadoop/Hbase/Storm/TCP"
        }, {
          id: 5,
          name: "信息安全",
          iconPath: '/assets/img/feature/交互设计.png',
          content: "Web/MYSQL/Python/PHP/Linux/渗透/LDAP/XSS"
        },
      ]
    }
  },
  methods: {

    handleToggle() {
      const month = this.month;
      const year = this.year;

      if (month) {
        this.year = true;
        this.month = false;
      }
      if (year) {
        this.year = false;
        this.month = true;
      }

    }
  }
}
</script>

<style scoped>
/*@import '/static/assets/css/iconfont.css';*/
.section-title{
  padding-top: 80px;
}
/*.col-lg-4{*/
/*  flex: 0 0 33.3%!important;*/
/*  max-width: 33.3%!important;*/
/*}*/
/*.row {*/
/*  display: -ms-flexbox;*/
/*  display: flex;*/
/*  -ms-flex-wrap: wrap;*/
/*  flex-wrap: wrap;*/
/*  margin-right: -15px;*/
/*  margin-left: -15px*/
/*}*/
/*.single-service{*/
/*  !*width: 33.3%!important;*!*/
/*  margin: 15px 0;*/
/*}*/
/*.col-12 {*/
/*  -ms-flex: 0 0 100%;*/
/*  flex: 0 0 100%;*/
/*  max-width: 100%*/
/*}*/
/*.inner{*/
/*  transition: all 0.3s cubic-bezier(0.84, 0.35, 0.39, 0.74) 0s;*/
/*  background-color: #fff;*/
/*  border-radius: 7px;*/
/*  padding: 30px;*/
/*}*/
/*.inner:hover{*/
/*  box-shadow : 0 9px 28px rgba(0, 0, 0, 0.44) ;*/
/*}*/

/*.title{*/
/*  display: flex;*/
/*  color: #2d3666;*/
/*  column-gap: 20px;*/
/*}*/
/*i{*/
/*  font-size: 28px;*/
/*}*/
/*p{*/
/*  margin-bottom: 0!important;*/
/*}*/

</style>
